import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'
import Login from '@/components/Login.vue'
import Profile from '@/components/Profile.vue'
import EtsList from '@/components/EtsList.vue'
import Detail from '@/components/Detail.vue'
import Order from '@/components/Order.vue'
import EventPub from '@/components/EventPub.vue'
import EventPubDetail from '@/components/EventPubDetail.vue'
import Register from '@/components/Register.vue'
import Pay from '@/components/notice/Pay.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'Login',
      meta: {
        title: '登录'
      },
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      meta: {
        title: '注册'
      },
      component: Register
    },
    {
      path: '/',
      meta: {
        title: '交大赛事票务'
      },
      redirect: {name: 'EtsList'}
    },
    {
      path: '/index',
      meta: {
        title: '交大赛事票务'
      },
      name: 'HomePage',
      component: HomePage,
      children: [
        {
          path: '',
          name: 'EtsList',
          meta: {
            title: '体育赛事'
          },
          component: EtsList
        },
        {
          path: '/pay/result/:orderNum',
          name: 'Pay',
          meta: {
            title: '支付结果',
            requireAuth: true
          },
          component: Pay
        },
        {
          path: '/detail/:id',
          name: 'Detail',
          meta: {
            title: ''
          },
          component: Detail
        },
        {
          path: '/order',
          name: 'Order',
          meta: {
            title: '订单',
            requireAuth: true
          },
          component: Order
        },
        {
          path: '/profile',
          name: 'Profile',
          meta: {
            title: '个人中心',
            requireAuth: true
          },
          component: Profile
        },
        {
          path: '/eventPub',
          name: 'EventPub',
          meta: {
            title: '票务发布'
          },
          component: EventPub,
          requireAuth: true
        },
        {
          path: '/eventPub/detail/:id',
          name: 'EventPubDetail',
          meta: {
            title: '票务发布详情',
            requireAuth: true
          },
          component: EventPubDetail
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    // 如果未匹配到路由
    // 如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
    from.name ? next({name: from.name}) : next('/error')
  } else {
    if (to.meta.title) {
      document.title = to.meta.title
    }
    if (to.query.title) {
      document.title = to.query.title
      to.meta.title = to.query.title
    }
    let auth = localStorage.getItem('token')
    if (to.meta.requireAuth) {
      if (auth) {
        next()
      } else {
        next({
          path: '/login',
          query: {target: to.fullPath}
        })
      }
    } else {
      // 如果是访问的登录页面，但已经是登录了的用户就直接跳转至工作台，否则就禁止自动跳转
      if (to.name === 'login' && auth) {
        next({
          path: '/index'
        })
      } else {
        next()
      }
    }
  }
})

export default router
